<template>
    <!-- 教材选择 -->
    <div @click.stop class="TextBookList">
        <ul>
            <li @click.stop="confirmTextBook" v-for="(val,index) in teachingmaterial" :data-index="index" :data-id='val.ID'
                :class="{confirmTextBook:isTEXTBOOK == index}">
                {{val.Version}}{{val.SubVersion}}{{val.SubjectName}}{{val.UpOrDown}}
            </li>
        </ul>
    </div>
</template>
<script>
    import {mapGetters, mapActions} from 'vuex'
    export default {
        name: "TextBookList",
        computed: mapGetters([
            'teachingmaterial',
            'isTEXTBOOK'
        ]),
        data () {
            return {}
        },
        methods: mapActions([
            'confirmTextBook'
        ])
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../assets/css/public.scss';

    div.TextBookList {
        position: absolute;
        left: 0;
        bottom: 60px;
        right: 0;
        margin: auto;
        width: 900px;
        max-height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        margin: 0 auto;
        box-shadow: $boxShadow;
        ul {
            margin: 20px auto;
            li {
                height: 30px;
                line-height: 30px;
                font-size: 22px;
                text-align: center;
                color: #ccc;
                transition: transform .2s linear;
                cursor: pointer;
            }
            li:hover {
                transform: translateX(10px);
                color: #333;
            }
            li.confirmTextBook {
                color: #000;
                font-size: 24px;
            }
            li.confirmTextBook:hover{
                transform: translateX(0);
                color: #000;
            }
        }
    }
</style>